<template>
	<view>
		<!-- 返回首页 -->
		<!-- <uni-bankhome /> -->
		<view class="post-image" @click="downLoad">
			<!-- #ifdef MP-WEIXIN -->
			<canvas id="canvas" type="2d" class="canvas" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<canvas canvas-id="canvas" class="canvas" />
			<!-- #endif -->
		</view>
		<!-- <view>
			<div class="postjump" v-if="ispost == 2" @click="jumppost">
				<span>生成海报</span>
			</div>
		</view> -->
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import DrawPoster from "@/js_sdk/u-draw-poster";
	import {
		Post
	} from "@/api/common.js"
	import {
		SunCode
	} from "@/api/goods.js";
	export default {
		data() {
			return {
				style: {},
				ispost: 1,
			}
		},
		onLoad() {
			this.$options.filters.forceLogin()
			this.handleLink()
			setTimeout(() => {
				this.ispost = 2
			}, 2200)
		},
		methods: {
			// 生成海报
			jumppost() {
				uni.redirectTo({
					url: '/pages/tabbar/user/post/postpromotional'
				});
			},
			/**
			 * 解决微信小程序中图片模糊问题
			 */
			// #ifdef MP-WEIXIN
			st2: (size) => size,
			// #endif

			// #ifndef MP-WEIXIN
			st2: (size) => size * 2,
			// #endif
			async handleLink() {
				uni.showToast({
					title: "请点击保存图片",
					duration: 2000,
					icon: "none",
				});
				this.init();
			},
			/**
			 * 创建canvas
			 */
			async init() {
				let scene = storage.getUserInfo().promotionCode;
				let sunCode = await SunCode(`/pages/tabbar/home/page/InterceptPage?scene=${scene}`)
				// 传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制
				const dp = await DrawPoster.build("canvas")
				// 绘制背景与文字
				const {
					width,
					height,
					background
				} = {
					width: 360,
					height: 576, 
					background: "https://rsyl.oss-cn-beijing.aliyuncs.com/e6c5375ab7eb483ca7783a7d3b22a30d.jpeg"
				};
				dp.canvas.width = width
				dp.canvas.height = height
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(
							background,
							this.st2(0),
							this.st2(0),
							this.st2(width),
							this.st2(height),
						)
					]);
				});
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(
							`data:image/png;base64,${sunCode.data.result.sunCode}`,
							this.st2(110),
							this.st2(200),
							this.st2(140),
							this.st2(140),
						)
					]);
				});
				const result = await dp.awaitCreate();
				this.imgUrl = await dp.createImagePath();
				// [true]
				// ...tmp...
			},

			/**
			 * 保存图片
			 */
			downLoad() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgUrl,
					success: function() {
						uni.showToast({
							title: "保存成功！",
							icon: "none",
						});
					},
					fail: function(res) {
						wx.showModal({
							title: "提示",
							content: "需要您授权保存相册",
							showCancel: false,
							success() {
								wx.openSetting({
									success(settingdata) {
										if (settingdata.authSetting[
												'scope.writePhotosAlbum']) {

										} else {

										}
									}
								})
							}
						})

					},
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.post-image {
		.canvas {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 360px;
			height: 576px;
			transform: translate(-180px, -288px);
		}
	}

	.postjump {
		position: fixed;
		bottom: 10%;
		left: 50%;
		width: 360px;
		height: 576px;
		transform: translate(-180px, -288px);
		z-index: 999999;

		span {
			font-size: 18px;
			padding: 5px 7px;
			border: 1px solid #ccc;
			border-radius: 17px;
		}
	}
</style>
